<template>
	<view>
		<custom-header bgColor="#F5564D" borderColor="#F5564D" white="" title="我的评价" />
		<view class="bg" :style="{top:statusBarHeight+'px'}"></view>
		<view class="_wrap">
			<view class="sotre_wrap">
				<view class="logo">
					 <image :src="evaluateStats.avatarId || 'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/store_logo.png'" mode=""></image>
				</view>
				<view class="info">
					<view class="name_tag">
						<view class="name">{{evaluateStats.shopName}}</view>
						<view class="tag">{{evaluateStats.tagName}}</view>
					</view>
					<view class="s_score_wrap">
						<view class="icon">
							<up-rate
								active-color="#FCC358" 
								inactive-color="#FCC358" 
								gutter="0"
								:count="count" 
								v-model="value"
								></up-rate>
						</view>
						<view class="score">
							{{value}}
						</view>
					</view>
					<view class="address_satisfaction">
						<view class="address">所在地：{{evaluateStats.addressCn}}</view>
						<view class="satisfaction">
							<view class="text">满意</view>
							<view class="value">{{evaluateStats.satisfaction}}%</view>
						</view>
					</view>
				</view>
			</view>
			<view class="score_wrap">
				<view class="sw_score">
					<view class="score">
							{{value}}
					</view>
					<view class="icon">
						<up-rate
							active-color="#FCC358" 
							inactive-color="#FCC358" 
							gutter="0"
							:count="count" 
							v-model="value"
							size="28"></up-rate>
					</view>
				</view>
				<view class="sw_other">
					<view class="o">
						<view class="name">商品</view>
						<view class="border"></view>
						<view class="percentage">{{evaluateStats.avgGoodsScore}}%</view>
					</view>
					<view class="o">
						<view class="name">售后</view>
						<view class="border"></view>
						<view class="percentage">{{evaluateStats.avgAfterSalesScore}}%</view>
					</view>
					<view class="o">
						<view class="name">物流</view>
						<view class="border"></view>
						<view class="percentage">{{evaluateStats.avgLogisticsScore}}%</view>
					</view>
				</view>
			</view>
			<view 
				class="no_data" 
				:style="{height:'calc(100vh - 190rpx - 145rpx - 90rpx - '+statusBarHeight+'px)'}"
				v-if="!listData.length && listLoading != 'loading'">
				<view class="nd_wrap">
					<view class="icon">
						<image src="/static/common/nodata1.png" mode=""></image>
					</view>
					<view class="text">暂无评价</view>
				</view>
			</view>
			<scroll-view
				:scroll-y="true" 
				scroll-with-animation
				:style="{height:'calc(100vh - 190rpx - 145rpx - 90rpx -  '+statusBarHeight+'px)'}"
				class="scroll_content_wrap"
				v-if="listData.length">
					<view class="list_wrap">
						<view 
						class="list"
						v-for="(item,index) in listData" 
						:key="index">
							<view class="orderNumber_createTime">
								<view class="orderNumber">订单编号：{{ item.orderNo }}</view>
								<view class="createTime">{{ item.evaluateTime }}</view>
							</view>
							<view class="flower_info">
								<view class="name"> {{ item.productName }}+{{item.gradeName}}</view>
								<view class="info_wrap">
									<view class="info">规格：{{item.specName}}</view>
									<view class="info">成熟度：中熟</view>
									<view class="info">颜色：{{item.colorName}}</view>
									<view class="info">单价：￥{{item.unitPrice}}</view>
									<view class="info">数量：{{item.actQuantity}}</view>
									<view class="info">
										合计：<text class="red">￥{{item.goodsAmount}}</text>
									</view>
								</view>
							</view>
							<view class="evaluate_info">
								<view class="ev_user_score">
									<view class="user">
										<view class="tx">
											<image :src="item.avatarId || 'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'" mode=""></image>
										</view>
										<view class="name">{{item.nickname}}</view>
									</view>
									<view class="score_icon">
										<up-rate
											active-color="#FCC358" 
											inactive-color="#FCC358" 
											gutter="0"
											:count="count" 
											v-model="item.totalScore"
											size="14"></up-rate>
									</view>
								</view>
								<view class="ev_content">
									{{item.content}}
								</view>
								<view class="ev_image">
									<view
										class="image_list" 
										v-for="(item,index) in imgList" 
										:key="index"
										@click="handlePreviewImage(index)">
										<image :src="item.url" lazy-load></image>
									</view>
								</view>
							</view>
						</view>
					</view>
			</scroll-view>
			<view class="loading_wrap" v-if="listLoading == 'loading'">
				<up-loadmore
					:status="listLoading"
					iconSize="22"
					iconColor="#FF3316"
					loadingIcon='semicircle'
					loadingText=""
					/>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref, onMounted } from 'vue'
	import { useStore } from 'vuex';
    import goodsApi from '@/api/goods'

	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const count = ref(5)
	const value = ref('5.0')

	const params = {
		pageNo: 1,
		pageSize: 20,
	}
	
	// 评价统计数据
	const evaluateStats = ref({})

	// 获取列表数据
	const listLoading = ref('loadmore');
	const listData = ref([]);
	const loadGetListData = async () => {
		try {
			listData.value = []
			listLoading.value = 'loading'

			const [statsResponse, listResponse] = await Promise.all([
				goodsApi.getEvaluateStatistics(),           // 获取评价统计数据
				goodsApi.getShopGoodsEvaluatePageList(params) // 获取评价分页列表
			])

			// 处理评价统计数据
			if (statsResponse) {
				evaluateStats.value = statsResponse
				value.value = statsResponse.totalScore
			}

			// 处理评价列表数据
			if (listResponse && listResponse.records.length > 0) {
				listData.value = listResponse.records
				if(listResponse.records.resourceIdList.length){
					listData.value.forEach(item=>{
						imgList.value = item.resourceIdList.map((item)=>{return {url:item}})
					})
				}
				if (listResponse.records.length < params.pageSize) {
					listLoading.value = 'nomore'  
				} else {
					listLoading.value = 'loadmore'  
				}
			} else {
				listData.value = []
				listLoading.value = 'nomore'
			}

		} catch (error) {
			console.error('获取评价数据失败:', error)
			listData.value = []
			listLoading.value = 'loadmore'

			uni.showToast({
				title: '获取评价数据失败',
				icon: 'none'
			})
		}
	};
	
	const imgList = ref([
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		},
		{
			url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg'
		}
	])
	// 预览图片
	const handlePreviewImage = (index)=>{
		console.log(imgList.value.map((item)=> item.url))
		uni.previewImage({
			current:index || 0,
			urls:imgList.value.map((item)=> item.url )
		})
	}
	
	onMounted(()=>{
		loadGetListData()
	})
	
	
</script>

<style lang="scss">
	.bg{
		height: 151rpx;
		background: linear-gradient(180deg, rgba(245, 86, 77, 1) 0%, rgba(245, 86, 77, 0.7) 70.83%, rgba(245, 86, 77, 0) 100%);
		position: absolute;
		width: 100%;
		left: 0;
		z-index: 1;
	}
	._wrap{
		padding: 0 20rpx;
		position: relative;
		z-index: 2;
		.sotre_wrap{
			height: 130rpx;
			border-radius: 10rpx;
			background: #FFFFFF;
			padding: 30rpx 20rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.logo{
				width: 80rpx;
				height: 80rpx;
				margin: 0 25rpx 0 10rpx;
				display: flex;
			}
			.info{
				flex: 1;
				.name_tag{
					display: flex;
					align-items: center;
					.name{
						color: #262665;
						font-size: 28rpx;
					}
					.tag{
						border-radius: 4rpx;
						background: #FCE4E3;
						padding: 5rpx 15rpx;
						font-size: 18rpx;
						color: #FF7A75;
						margin-left: 20rpx;
					}
				}
				.s_score_wrap{
					display: flex;
					align-items: center;
					padding: 10rpx 0;
					.icon{
						transform: translateX(-4rpx);
					}
					.score{
						color: #F5564D;
						font-size: 24rpx;
						font-weight: bold;
						padding-left: 10rpx;
					}
				}
				.address_satisfaction{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.address{
						font-size: 24rpx;
						color: #999999;
					}
					.satisfaction{
						width: 124rpx;
						height: 32rpx;
						line-height: 32rpx;
						border: 1rpx solid #FF7770;
						display: flex;
						align-items: center;
						font-size: 20rpx;
						.text{
							width: 50rpx;
							height: 100%;
							background: #FF7770;
							color: #fff;
							text-align: center;
						}
						.value{
							padding-left: 5rpx;
							color: #FF7770;
							flex: 1;
						}
					}
				}
			}
		}
		.score_wrap{
			border-radius: 10rpx;
			background: #FFFFFF;
			padding: 20rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 105rpx;
			.sw_score{
				display: flex;
				align-items: center;
				.score{
					color: #F5564D;
					font-size: 48rpx;
					font-weight: bold;
					padding-right: 20rpx;
				}
			}
			.sw_other{
				margin-left: 90rpx;
				.o{
					display: flex;
					align-items: center;
					margin-top: 10rpx;
				}
				.name{
					font-size: 20rpx;
					color: #666666;
				}
				.border{
					width: 40rpx;
					height: 6rpx;
					border-radius: 6rpx;
					background-color: #F5564D;
					margin: 0 10rpx;
				}
				.percentage{
					color: #F5564D;
					font-size: 20rpx;
				}
			}
		}
		.no_data{
			margin-top: 20rpx;
			border-radius: 10rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			.nd_wrap{
				width: max-content;
			}
			.icon{
				width: 279rpx;
				height: 237rpx;
			}
			.text{
				font-size: 32rpx;
				color: #999999;
				padding-top: 20rpx;
			}
		}
		.scroll_content_wrap{
			margin-top: 20rpx;
		}
		.list_wrap{
			.list{
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				background: #FFFFFF;
				padding: 0 20rpx;
				.orderNumber_createTime{
					padding: 20rpx 0;
					border-bottom: 1px solid #E5E5E5;
					display: flex;
					justify-content: space-between;
					color: #333;
					font-size: 24rpx;
					font-weight: bold;
				}
				.flower_info{
					padding: 20rpx 0;
					border-bottom: 1px solid #E5E5E5;
					.name{
						font-size: 28rpx;
						color: #F5564D;
						font-weight: bold;
					}
					.info_wrap{
						display: flex;
						flex-wrap: wrap;
						.info{
							width: 33.3%;
							color: #999999;
							font-size: 24rpx;
							padding-top: 10rpx;
							text.red{
								color: #C60C0C;
							}
						}
					}
				}
				.evaluate_info{
					padding-bottom: 20rpx;
					.ev_user_score{
						display: flex;
						align-items: center;
						padding: 20rpx 0;
						.user{
							display: flex;
							align-items: center;
							.tx{
								width: 48rpx;
								height: 48rpx;
								image{
									width: 100%;
									height: 100%;
									border-radius: 100%;
								}
							}
							.name{
								font-size: 24rpx;
								color: #000000;
								padding-left: 5rpx;
							}
						}
						.score_icon{
							padding-left: 30rpx;
						}
					}
					.ev_content{
						font-size: 24rpx;
						color: #666666;
					}
					.ev_image{
						display: flex;
						flex-wrap: wrap;
						.image_list{
							width: 200rpx;
							height: 200rpx;
							margin: 20rpx 20rpx 0 0;
							
						}
						image{
							width: 100%;
							height:100%;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
